<template>
	<view class="content">
		<view style="height: 50rpx;">
			<picker mode="multiSelector" :range="regionList" range-key="regionName" @change="changeRegion"
				@columnchange="regionColumnChange"> 地区:{{region}} ▼</picker>
		</view>
		<view style="margin: 20rpx;">
			<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="searchInput" placeholder="搜索"
				@iconClick="search"></uni-easyinput>
		</view>

		<!-- swiper end -->


		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-left">
				<view v-for="item in postList" style="width: 100%; ;" @click="detail(item.id)">
					<uni-card :title="item.username" :sub-title="item.fullAddress"  :thumbnail="item.profilePath"  @click="onClick">
						<view style="font-size: 35rpx;">
							{{item.title}}
						</view>
						<view>
							&nbsp;&nbsp;{{item.desc}}
						</view>
						<view>
							<image :src="item.imagePath" mode="aspectFit" style="width: 100%;"></image>
						</view>
					</uni-card>
				</view>
			</scroll-view>

		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl
	} from '../../static/js/common.js'

	const swiperList = ref([])
	const regionList = ref([])
	const postList = ref([])
	let region = ref('')
	let regionId = [1000000, 1000034, 0]
	const searchInput=ref()
	
	function detail(id){
		sessionStorage.setItem("selectedId",id)
		sessionStorage.setItem("detailType",2)
		uni.navigateTo({
			url:'/pages/detail/detail'
		})
	}
	
	function search(){
		sessionStorage.setItem("searchInput",searchInput.value)
		sessionStorage.setItem("searchType",2)
		sessionStorage.setItem("regionId",JSON.stringify(regionId))
		uni.navigateTo({
			url:'/pages/category/category'
		})
	}

	function regionColumnChange(e) {
		let column = e.detail.column
		let index = e.detail.value
		let regionInfo = regionList.value[column][index]
		if (regionInfo != null) {
			regionId[column] = regionInfo.regionId
			requestColumn(column, regionInfo.regionId)
		}

	}

	function changeRegion(e) {
		if (regionList.value[2].length === 0) {
			region.value = regionList.value[1][e.detail.value[1]].regionName
		} else {
			region.value = regionList.value[2][e.detail.value[2]].regionName
		}

	}

	onShow(() => {
		requestSwiper()
		requestRegion()
		requesPostData()
	})

	function requesPostData() {
		let params = {
			pageSize: 6,
			pageIndex: 1
		}
		uni.request({
			url: baseUrl + '/post/list',
			method: 'POST',
			data: params,
			success: (res) => {
				postList.value = res.data.data.result
				console.log(postList.value)
			}
		})
	}

	function requestColumn(column, regionId) {
		if (column < 2) {
			uni.request({
				url: baseUrl + '/region/column',
				data: {
					regionId
				},
				success: (res) => {
					regionList.value[column + 1] = res.data.data
				}
			})
		}
	}

	function requestRegion() {
		let params = {

		}
		uni.request({
			url: baseUrl + '/region/list',
			data: params,
			success: (res) => {
				regionList.value = [...res.data.data.lists]
				let e = {
					detail: {
						value: [0, 0, 0]
					}
				}
				changeRegion(e)
			}
		})
	}

	function requestSwiper() {
		uni.request({
			url: baseUrl + '/image/swiperList',
			success: (res) => {
				swiperList.value = res.data.data
			}
		})
	}
</script>

<style scoped>
	.content {
		padding: 20rpx;
	}

	.swiper {
		width: 100%;
		height: 300rpx;
	}
</style>